<template>
    <div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
    export default {
        props: ['config'],
        data() {
            return {
                charts: null,
            }
        },
        methods: {
            initChart(config) {
                console.log(config)
            var myChart = echarts.init(this.$refs.charts)
            const option1 = {
                grid: {
                    containLabel: true,
                    left: 20,
                    right: 40,
                    top: 40,
                    bottom: 20
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: config.data1,
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    triggerOn: 'mousemove',
                    valueFormatter: (value) => '总收益' + value
                },
                series: [
                    {
                        data: config.data2,  //就这有问题
                        type: 'line',
                        showSymbol: false,
                        smooth: true,
                        itemStyle: {
                        color: '#21cca2'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(55, 225, 150,0.5)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(55, 225, 150,0)' // 100% 处的颜色
                                }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option1)
            this.charts = myChart
            }
        },
        mounted() {
            this.initChart(this.config)
            // console.log(config)
        }
    }
</script>

<style lang="scss" scoped>
.charts {
  height: 200px;
  width: 340px;
 // background-color: pink;
  margin: 0 auto;
}
</style>